<template>
  <div ref="main" class="main">
    <el-button type="primary" size="mini" @click="toggleScreen">全屏</el-button>

    <span class="nowTime">{{ nowTime }}</span>
    <div class="echartsabs">
      <!-- 柱状图 -->
      <div ref="barBox" class="echartsBox"></div>

      <!-- 地图 -->
      <div ref="mapBox" class="echartsBoxer"></div>
      <!-- 饼状图 -->
      <div ref="pieBox" class="echartsBoxer"></div>
    </div>
    <!-- 字符云 -->
    <div>
      <div class="abouts">
        <span style="color: #9aa8d4; font-size: 25px">热门搜索词 </span>
        <span style="color: #404d69; font-size: 24px">Top Search</span>
      </div>
      <div ref="wordBox" class="echartsBoxed"></div>
    </div>
    <!-- 粒子效果 -->
    <div class="wrapper">
      <CanvasBg />
    </div>

    <div class="column">
      <div>
        <span style="color: #9aa8d4; font-size: 25px">统计数据 </span>
        <span style="color: #404d69; font-size: 24px">Statistics Data</span>
        <div style="width: 400px; height: 230px">
          <div
            style="
              display: flex;
              float: left;
              margin-top: 15px;
              margin-right: 20px;
            "
          >
            <span class="gradual">
              <i
                class="el-icon-s-order"
                style="color: #8f62f5; font-size: 30px"
              ></i
            ></span>
            <span>
              <div class="figure">85.6</div>
              <div class="worder">订单总数（万）</div>
            </span>
          </div>
          <div
            style="
              display: flex;
              float: left;
              margin-top: 15px;
              margin-right: 20px;
            "
          >
            <span class="gradual">
              <i
                class="el-icon-s-opportunity"
                style="color: #ea9502; font-size: 30px"
              ></i
            ></span>
            <span>
              <div class="figure">32.5</div>
              <div class="worder">销售总量（万）</div>
            </span>
          </div>

          <div
            style="
              display: flex;
              float: left;
              margin-top: 15px;
              margin-right: 35px;
            "
          >
            <span class="gradual">
              <svg
                t="1682307085050"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4555"
                width="30"
                height="30"
              >
                <path
                  d="M395.765333 586.570667h-171.733333c-22.421333 0-37.888-22.442667-29.909333-43.381334L364.768 95.274667A32 32 0 0 1 394.666667 74.666667h287.957333c22.72 0 38.208 23.018667 29.632 44.064l-99.36 243.882666h187.050667c27.509333 0 42.186667 32.426667 24.042666 53.098667l-458.602666 522.56c-22.293333 25.408-63.626667 3.392-54.976-29.28l85.354666-322.421333z"
                  fill="#E1433B"
                  p-id="4556"
                ></path>
              </svg>
            </span>
            <span>
              <div class="figure">92.6</div>
              <div class="worder">人均消费(元)</div>
            </span>
          </div>
          <div
            style="
              display: flex;
              float: left;
              margin-top: 15px;
              margin-right: 20px;
            "
          >
            <span class="gradual">
              <svg
                t="1682307085050"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4555"
                width="30"
                height="30"
              >
                <path
                  d="M395.765333 586.570667h-171.733333c-22.421333 0-37.888-22.442667-29.909333-43.381334L364.768 95.274667A32 32 0 0 1 394.666667 74.666667h287.957333c22.72 0 38.208 23.018667 29.632 44.064l-99.36 243.882666h187.050667c27.509333 0 42.186667 32.426667 24.042666 53.098667l-458.602666 522.56c-22.293333 25.408-63.626667 3.392-54.976-29.28l85.354666-322.421333z"
                  fill="#A3C948"
                  p-id="4556"
                ></path>
              </svg>
            </span>
            <span>
              <div class="figure">45</div>
              <div class="worder">近十分钟新订单</div>
            </span>
          </div>
        </div>
      </div>
      <div style="position: absolute; top: 210px">
        <span style="color: #9aa8d4; font-size: 25px">大额订单Top </span>
        <span style="color: #404d69; font-size: 24px">Supper Orders</span>
      </div>
      <el-table
        class="addsss table-fixed-class"
        :data="tableData"
        :header-cell-style="{
          background: '#0A1631',
          color: '#9AA8D4',
          borderColor: '#33416b',
          // border: '1px solid #33416b',
        }"
        :cell-style="{
          background: '#0A1631',
          color: '#9AA8D4',
          borderColor: '#33416b',
          // border: '1px solid #33416b',
        }"
      >
        <el-table-column
          fixed
          prop="date"
          label="时间"
          width="99"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="物品" width="98" align="center">
        </el-table-column>
        <el-table-column
          prop="province"
          label="数量"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="city" label="金额" width="100" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 进度条 -->
  </div>
</template>

<script>
import echarts from 'echarts'
//引入中国地图
import 'echarts/map/js/china.js'
//引入词云
import 'echarts-wordcloud'
//引用全屏插件
// import screenfull from 'screenfull'
//引入粒子组件
import CanvasBg from './CanvasBg.vue'

export default {
  components: {
    CanvasBg,
  },
  data() {
    return {
      startVal: '000000',
      endVal: '999999',
      nowTime: '', //当前时间
      tableData: [
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },

        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
        {
          date: '2016-05-02',
          name: '物品1',
          province: '62',
          city: '425864',
        },
      ],
    }
  },
  created() {},
  mounted() {
    this.initBar()
    this.initPie()
    this.initMap()
    this.initWord()
    this.nowTimes()
    this.bar()
  },
  methods: {
    //柱状图
    initBar() {
      //new一个echarts示例
      var myChart = echarts.init(this.$refs.barBox)
      //初始化配置项

      var xAxisData = []
      var data1 = []
      var data2 = []
      for (var i = 0; i < 80; i++) {
        xAxisData.push('date' + i)
        data1.push(Math.ceil(Math.random() * 10))
        data2.push(Math.ceil(Math.random() * 10))
      }

      var option = {
        // 标题的参数
        title: {
          text: '订单退单柱状图',
          // 标题字体样式
          textStyle: {
            color: '#9AA8D4',
            fontSize: 22,
            fontWeight: 'normal',
          },
        },
        // 两个按钮的样式
        legend: {
          // 对应 series里的 name
          data: ['订单', '退单'],
          // 距离底部
          bottom: 10,
          // 字体样式
          textStyle: {
            color: '#A8AAB3', // 坐标值得具体的颜色
            fontSize: 12,
          },
        },
        // toolbox: {
        //     // y: 'bottom',
        //     // 右上角工具栏
        //     feature: {
        //         magicType: {
        //             type: ['stack', 'tiled']
        //         },
        //         dataView: {},
        //         saveAsImage: {
        //             pixelRatio: 2
        //         }
        //     }
        // },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          // 网格是否显示
          splitLine: {
            show: false,
          },
          // x线的样式
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#A8AAB3', // 左边线的颜色
              width: '1', // 坐标线的宽度
            },
          },
          axisLabel: {
            // 坐标轴字体样式
            textStyle: {
              color: '#A8AAB3', // 坐标值得具体的颜色
              fontSize: 12,
            },
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          // y线的样式
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#A8AAB3', // 左边线的颜色
              width: '1', // 坐标线的宽度
            },
          },
          axisLabel: {
            // 坐标轴字体样式
            textStyle: {
              color: '#A8AAB3', // 坐标值得具体的颜色
              fontSize: 12,
            },
          },
        },
        series: [
          {
            name: '订单',
            type: 'bar',
            data: data1,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#7D05E2' }, // 柱图渐变色
                  { offset: 0.5, color: '#B600FF' }, // 柱图渐变色
                  { offset: 1, color: '#BC04E2' }, // 柱图渐变色
                ]),
              },
            },
          },
          {
            name: '退单',
            type: 'bar',
            data: data2,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#24CBFF' }, // 柱图高亮渐变色
                  { offset: 0.5, color: '#24A3FF' }, // 柱图高亮渐变色
                  { offset: 1, color: '#2492FF' }, // 柱图高亮渐变色
                ]),
              },
            },
          },
        ],
        // 柱子弹出来的动画样式
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5
        },
      }
      //绘制图表
      myChart.setOption(option)
    },
    //饼状图
    initPie() {
      var myChart = echarts.init(this.$refs.pieBox)
      var option = {
        title: {
          text: '购买终端',
          // 标题字体样式
          textStyle: {
            color: '#9AA8D4',
            fontSize: 22,
            fontWeight: 'normal',
          },
        },
        // hover扇面时候显示的内容 b是data的name  c是data的value
        tooltip: {
          trigger: 'item',
          formatter: '{b}数量 : {c}个;占比 ({d}%)',
        },
        // legend: {
        //     left: 'center',
        //     top: 'bottom',
        //     data: ['ios', 'PC Web', 'Android', 'Wap Web']
        // },
        // toolbox: {
        //     show: true,
        //     feature: {
        //         mark: { show: true },
        //         dataView: { show: true, readOnly: false },
        //         magicType: {
        //             show: true,
        //             type: ['pie', 'funnel']
        //         },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            // 最外圈和最内圈的比例大小
            radius: ['25%', '50%'],

            roseType: 'area',
            data: [
              {
                value: 25,
                name: 'Android',
                label: {
                  normal: {
                    textStyle: {
                      // 字体颜色渐变  扇颜色保持一致
                      color: '#4B4CDC',
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#6D48DC' }, // 柱图渐变色
                      { offset: 0.5, color: '#6D48DC' }, // 柱图渐变色
                      { offset: 1, color: '#4B4CDC' }, // 柱图渐变色
                    ]),
                  },
                },
              },
              {
                value: 20,
                name: 'ios',
                label: {
                  normal: {
                    // 字体颜色
                    textStyle: {
                      color: '#248DFF',
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#24C9FF' }, // 柱图渐变色
                      { offset: 0.5, color: '#24ABFF' }, // 柱图渐变色
                      { offset: 1, color: '#248DFF' }, // 柱图渐变色
                    ]),
                  },
                },
              },
              {
                value: 15,
                name: 'PC Web',
                label: {
                  normal: {
                    textStyle: {
                      color: '#BD00FF',
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#D200FF' }, // 柱图渐变色
                      { offset: 0.5, color: '#BD00FF' }, // 柱图渐变色
                      { offset: 1, color: '#BD00FF' }, // 柱图渐变色
                    ]),
                  },
                },
              },

              {
                value: 5,
                name: 'Wap Web',
                label: {
                  normal: {
                    textStyle: {
                      color: '#70218F',
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#8A1D89' }, // 柱图渐变色
                      { offset: 0.5, color: '#7C1D8C' }, // 柱图渐变色
                      { offset: 1, color: '#70218F' }, // 柱图渐变色
                    ]),
                  },
                },
              },
            ],
          },
        ],
      }
      //绘制图表
      myChart.setOption(option)
    },
    //地图
    initMap() {
      var myChart = echarts.init(this.$refs.mapBox)

      var outname = [
        '南海诸岛',
        '北京',
        '天津',
        '上海',
        '重庆',
        '河北',
        '河南',
        '云南',
        '辽宁',
        '黑龙江',
        '湖南',
        '安徽',
        '山东',
        '新疆',
        '江苏',
        '浙江',
        '江西',
        '湖北',
        '广西',
        '甘肃',
        '山西',
        '内蒙古',
        '陕西',
        '吉林',
        '福建',
        '贵州',
        '广东',
        '青海',
        '西藏',
        '四川',
        '宁夏',
        '海南',
        '台湾',
        '香港',
        '澳门',
      ]
      var outvalue = [
        0, 524, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36,
        1052, 33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5,
        225,
      ]
      var outdata = []

      var max = 6000
      var min = 10
      // 改变涟漪圈从内到外的大小maxSize4Pin   minSize4Pin
      var maxSize4Pin = 30
      var minSize4Pin = 6

      for (var i = 0; i < outname.length; i++) {
        outdata.push({
          name: outname[i],
          value: outvalue[i],
        })
      }
      // 对应的省份和编码
      var geoCoordMap = {}
      /* 注册地图后可以使用getMap 获得地图信息 获取地图数据*/
      var mapFeatures = echarts.getMap('china').geoJson.features
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        // 把对应的省份和编码放入geoCoordMap
        geoCoordMap[name] = v.properties.cp
      })
      var convertData = function (outdata) {
        var res = []
        for (var i = 0; i < outdata.length; i++) {
          // 获取outdata里边省份的 编码
          var geoCoord = geoCoordMap[outdata[i].name]
          if (geoCoord) {
            res.push({
              name: outdata[i].name,
              value: geoCoord.concat(outdata[i].value),
            })
          }
        }
        return res
      }

      var option = {
        // backgroundColor: '#0F1 C3C',
        title: {
          text: '全国订单人数分布图',
          textStyle: {
            color: '#9AA8D4',
            fontSize: 22,
            fontWeight: 'normal',
          },
        },
        // 左下角条状数据
        // visualMap: {
        //     min: 0,
        //     max: 1100,
        //     text: ['多', '少'],
        //     realtime: false,
        //     calculable: true,
        //     inRange: {
        //         color: ['#073684', '#53D9FF']
        //     }
        // },
        tooltip: {
          show: true,
          formatter: function (params) {
            // console.log(params)
            if (params.value.length > 1) {
              return (
                '&nbsp;&nbsp;' +
                params.name +
                '&nbsp;&nbsp;&nbsp;' +
                params.value[2] +
                '人&nbsp;&nbsp;'
              )
            } else {
              return (
                '&nbsp;&nbsp;' +
                params.name +
                '&nbsp;&nbsp;&nbsp;' +
                params.value +
                '人&nbsp;&nbsp;'
              )
            }
          },
        },

        geo: {
          map: 'china',
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false,
            },
          },
          layoutSize: '100%',
          itemStyle: {
            normal: {
              borderColor: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#00F6FF',
                  },
                  {
                    offset: 1,
                    color: '#53D9FF',
                  },
                ],
                false
              ),
              borderWidth: 3,
              shadowColor: 'rgba(10,76,139,1)',
              shadowOffsetY: 0,
              shadowBlur: 60,
            },
          },
        },
        series: [
          {
            type: 'map',
            map: 'china',
            // 地图的长宽比
            aspectScale: 0.75,

            // 不显示省份名称
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },

            itemStyle: {
              // 省份的背景色和样式
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#073684', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#061E3D', // 100% 处的颜色
                    },
                  ],
                },
                borderColor: '#215495',
                borderWidth: 1,
              },
              // 鼠标移到省份时候hover显示的背景色和样式
              emphasis: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#073684', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#061E3D', // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            data: outdata,
          },
          {
            // 省份上显示的数字涟漪
            type: 'effectScatter',
            // 该系列使用的坐标系'geo',使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
            coordinateSystem: 'geo',
            // 涟漪特效相关配置
            rippleEffect: {
              brushType: 'fill',
            },
            // 配置何时显示特效。
            showEffectOn: 'render',
            /*
                            图形样式。
                            颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充
                        */
            itemStyle: {
              normal: {
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(5,80,151,0.2)',
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(5,80,151,0.8)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,108,255,0.7)',
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            label: {
              normal: {
                show: false,
                color: '#fff',
                fontWeight: 'bold',
                position: 'inside',
                formatter: function (para) {
                  return '{cnNum|' + para.data.value[2] + '}'
                },
                // 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                rich: {
                  // cnNum和formatter里的 return '{cnNum|' + para.data.value[2] + '}'对应
                  cnNum: {
                    fontSize: 12,
                    color: '#D4EEFF',
                  },
                },
              },
            },
            // 涟漪的样式 circle 是圆圈,还有'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 等
            symbol: 'circle',
            symbolSize: function (val) {
              if (val[2] === 0) {
                return 0
              }
              var a = (maxSize4Pin - minSize4Pin) / (max - min)
              var b = maxSize4Pin - a * max
              return a * val[2] + b * 1.2
            },
            data: convertData(outdata),
            zlevel: 1,
          },
        ],
      }

      myChart.setOption(option)
    },
    //字符云
    initWord() {
      var myChart = echarts.init(this.$refs.wordBox)
      var option = {
        tooltip: {
          show: true,
        },
        series: [
          {
            type: 'wordCloud',
            gridSize: 6,
            shape: 'diamond',
            sizeRange: [30, 60],
            width: 800,
            height: 500,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    'rgb(' +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(',') +
                    ')'
                  )
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            data: [
              {
                name: ' 特斯拉Model S',
                value: 30,
              },
              {
                name: '天生要强',
                value: 24,
              },
              {
                name: ' 华为p20',
                value: 21,
              },
              {
                name: '杜兰特',
                value: 19,
              },
              {
                name: '三只松鼠',
                value: 18,
              },
              {
                name: 'Mac Pro',
                value: 18,
              },
              {
                name: 'Iphone12 Pro',
                value: 17,
              },
              {
                name: '玛莎拉蒂',
                value: 12,
              },
              {
                name: '小米手机',
                value: 12,
              },
              {
                name: '保时捷',
                value: 11,
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
    //全屏
    toggleScreen() {
      console.log('全屏')
      const path = require('path')

      module.exports = {
        entry: './path/to/my/entry/file.js',
        output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'my-first-webpack.bundle.js',
        },
      }
      screenfull.toggle(this.$refs.main)
    },
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? '0' + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1
      let date =
        new Date(timeStamp).getDate() < 10
          ? '0' + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate()
      let hh =
        new Date(timeStamp).getHours() < 10
          ? '0' + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours()
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? '0' + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes()
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? '0' + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds()
      this.nowTime =
        year +
        ' - ' +
        month +
        ' - ' +
        date +
        ' - ' +
        ' ' +
        hh +
        ':' +
        mm +
        ':' +
        ss
    },
    nowTimes() {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-table__fixed::before {
  display: none;
}
.echartsBox {
  width: 800px;
  height: 300px;
}
.echartsBoxer {
  width: 300px;
  height: 352px;
  float: left;
  margin-left: 20px;
}

.echartsabs {
  width: 652px;
  height: 800px;
  margin: 0 auto;
  margin-top: 150px;
}
.main {
  width: 100%;
  height: 985px;
  background-color: #0a1631;

  .wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 300px;
  }
}
.echartsBoxed {
  width: 400px;
  height: 270px;
  position: absolute;
  bottom: 200px;
  left: 10px;
  background: rgb(22, 34, 60);
}
.column {
  position: absolute;
  right: 10px;
  top: 100px;
  width: 400px;
}

.nowTime {
  color: #fff;
  font-size: 25px;
  position: absolute;
  right: 30px;
  top: 20px;
}
.gradual {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(1deg, #0c1d3f 20%, #0f2349 100%);
}
.icon {
  margin-left: 15px;
  margin-top: 15px;
}
.el-icon-s-order {
  margin-left: 15px;
  margin-top: 15px;
}
.el-icon-s-opportunity {
  margin-left: 15px;
  margin-top: 15px;
}
.figure {
  font-family: Microsoft Yahei;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}
.worder {
  margin-top: 4px;
  font-family: Microsoft Yahei;
  font-size: 12px;
  color: #b0c2f9;
}
.abouts {
  position: absolute;
  top: 450px;
  left: 10px;
}
/* .el-table {
  color: #9aa8d4;
} */
.addsss {
  background-color: #33416b;
  border: 1px solid #33416b;
}

/* ::v-deep.el-table::before {
  display: none !important;
} */

.el-table::before {
  z-index: inherit; // 规定应该从父元素继承 z-index 属性的值。
}
</style>